/* Copyright (c) 2024 Huawei Technologies Co., Ltd.
openFuyao is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
         http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN 'AS IS' BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details. */
import { useEffect, useState, useCallback } from 'openinula';
import { SyncOutlined, MoreOutlined, CloseOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Form, Table, ConfigProvider, Space, Input, Button, Popover, Select, message, Tooltip } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import '../../styles/ColocationWorkloadManagementPage.less';
import { filterStatusName, reseverStatusName, compareObjKeys } from '../../utils/common';
import {
  filterRepeat, sortWorkLoadByNameAscend, sortWorkLoadByNameDescend,
  sortWorkLoadByNodeDescend, sortWorkLoadByNodeAscend, sortWorkLoadByNamespaceAscend,
  sortWorkLoadByNamespaceDescend, sortWorkLoadByStatusAscend, sortWorkLoadByStatusDescend,
  sortWorkLoadByIpAscend, sortWorkLoadByIpDescend,
} from '../../tools/utils';
import ColocationStateModal from '../../components/ColocationStateModal';
import ColocationDeleteModal from '../../components/ColocationDeleteModal';
import { workloadStatusOptions, ResponseCode } from '../../common/constants';
import {
  getColocationPodsListData, getNonColocationPodsListData, addColocationPods,
  updatePodsExpectStatusToOnline, updatePodsExpectStatusToOffline, deleteColocationPodsById
} from '../../api/colocationApi';
import ToolTipComponent from '@/components/ToolTipComponent';

export default function PodPage() {
  const [podForm] = Form.useForm();
  const [popOpen, setPopOpen] = useState('');
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const [colShow, setColShow] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();
  const [isShow, setIsShow] = useState('');
  // table部分

  // 非混部table
  const [podSortObj, setPodSortObj] = useState({}); // 排序
  const [podDetailFilterObj, setPodDetailFilterObj] = useState({}); // 筛选
  const [podDetailTotal, setPodDetailTotal] = useState(0);
  const [podPage, setPodPage] = useState(1);
  const [podDetailPageSize, setPodDetailPageSize] = useState(10);
  const [originalList, setOriginalList] = useState([]); // 非混部原始数据
  const [podLoading, setPodLoading] = useState(false);
  const [podList, setPodList] = useState([]); // 非混部pod table数据集
  const [selectionType, setSelectionType] = useState(false);
  const [filterPodNamespace, setFilterPodNamespace] = useState([]); // namespace赋值筛选项
  const [currentPodNamespace, setCurrentPodNamespace] = useState('');
  const [attTypeList, setAttTypeList] = useState([]); // 超级原始table数据集
  // 混部table
  const [colocationPodSortObj, setColocationPodSortObj] = useState({}); // 排序
  const [colocationPodDetailFilterObj, setColocationPodDetailFilterObj] = useState({}); // 筛选
  const [colocationPodDetailTotal, setColocationPodDetailTotal] = useState(0);
  const [colocationPodPage, setColocationPodPage] = useState(1);
  const [colocationPodDetailPageSize, setColocationPodDetailPageSize] = useState(10);
  const [colocationOriginalList, setColocationOriginalList] = useState([]); // 混部原始数据
  const [colocationPodList, setColocationPodList] = useState([]); // 混部pod table数据集
  const [colocationFilterPodNamespace, setColocationFilterPodNamespace] = useState([]); // namespace赋值筛选项
  const [currentColocationPodNamespace, setCurrentColocationPodNamespace] = useState('');
  const [colocationFilterPodStatus, setColocationFilterPodStatus] = useState([{ text: '在线', value: '在线' }, { text: '离线', value: '离线' }, { text: '超卖', value: '超卖' }]); // 混部属性赋值筛选项
  const [currentColocationPodStatus, setCurrentColocationPodStatus] = useState('');
  const [isPodWithoutPaddingBottom, setIsPodWithoutPaddingBottom] = useState('no-padding');

  // 混部状态弹窗
  const [colocationState, setColocationState] = useState(false);
  const [choseState, setChoseState] = useState('在线');
  // 删除提醒弹窗
  const [deleteModal, setDeleteModal] = useState(false);
  const [deleteName, setDeleteName] = useState('');
  const [deleteId, setDeleteId] = useState('');

  const handlePodShowChange = () => {
    setIsShow('cant_show');
  };

  // 混部节点移除
  const handleDeleteNode = async (record) => {
    setPopOpen('');
    setDeleteModal(true);
    setDeleteName(record.name);
    setDeleteId(record.key);
  };

  // 设置非混部的确定按钮
  const handleDeleteConfirmBack = async () => {
    // 此处接口
    try {
      const res = await deleteColocationPodsById(deleteId);
      if (res.status === ResponseCode.OK) {
        messageApi.success('非混部设置成功');
        getColocationPodList();
      } else {
        messageApi.error('非混部设置失败');
      }
    } catch (e) {
      messageApi.error('接口异常');
    }
    setDeleteModal(false);
  };

  // 设置非混部的取消按钮
  const handleDeleteCancel = () => {
    setDeleteModal(false);
  };

  // 混部pod列表项
  const colocationPodColumns = [
    {
      title: 'Pod名称',
      key: 'colocationPodName',
      dataIndex: 'name',
      sorter: true,
      sortOrder: colocationPodSortObj.key === 'colocationPodName' ? colocationPodSortObj.order : '',
      render: (_, record) => <Space>
        {record.hasController === true ?
          <div style={{ display: 'flex' }}>
            <div style={{ marginRight: '8px' }}>{record.name}</div>
            <Tooltip title='请前往其他更高级的控制器进行管理'>
              <QuestionCircleOutlined style={{ color: '#89939B' }} />
            </Tooltip>
          </div> : <div>{record.name}</div>}
      </Space>,
    },
    {
      title: '命名空间',
      key: 'colocationPodNamespace',
      filters: colocationFilterPodNamespace,
      filteredValue: currentColocationPodNamespace ? [currentColocationPodNamespace] : null,
      filterMultiple: false,
      sorter: true,
      sortOrder: colocationPodSortObj.key === 'colocationPodNamespace' ? colocationPodSortObj.order : '',
      render: (_, record) => <Space>
        {record.namespace}
      </Space>,
    },
    {
      title: '所属混部节点',
      key: 'colocation_pod_belong',
      sorter: true,
      sortOrder: colocationPodSortObj.key === 'colocation_pod_belong' ? colocationPodSortObj.order : '',
      render: (_, record) => <>
        {record.hostIP ? record.hostIP : '--'}
      </>,
    },
    {
      title: 'Pod IP地址',
      key: 'colocation_pod_ip',
      sorter: true,
      sortOrder: colocationPodSortObj.key === 'colocation_pod_ip' ? colocationPodSortObj.order : '',
      render: (_, record) => <>
        {record.podIPs ? record.podIPs.map(item => {
          return <div className='table_tuning_box'><p>{item}</p></div>;
        }) : '--'}
      </>,
    },
    {
      title: '业务属性',
      key: 'colocation_pod_status',
      filters: colocationFilterPodStatus,
      filteredValue: currentColocationPodStatus ? [currentColocationPodStatus] : null,
      filterMultiple: false,
      sorter: true,
      sortOrder: colocationPodSortObj.key === 'colocation_pod_status' ? colocationPodSortObj.order : '',
      render: (_, record) => <div className={`status_group`}>
        <span className={`${record.colocationType.toLowerCase()}_circle`}></span>
        <span>{(record.colocationType === 'offline' || record.colocationType === 'online' || record.colocationType === 'oversold') ? filterStatusName(record.colocationType) : '--'}</span>
      </div>,
    },
    {
      title: '操作',
      key: 'colocation_handle',
      render: (_, record) => (
        <Space>
          <Popover placement="bottom"
            content={
              <div className="colocation_rules_col_popver">
                {record.colocationType === 'online' ?
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <Button type="link" onClick={() => changeColocationState(record, 'off')}> {`修改为离线`}</Button>
                  </div>
                  : <></>}
                {record.colocationType === 'offline' ?
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                  </div>
                  : <></>}
                <Button type="link" onClick={() => { handleDeleteNode(record) }}> 设置为非混部</Button>
              </div>
            }
            trigger="click"
            open={popOpen === `${record.name}_${record.namespace}`}
            onOpenChange={newOpen => newOpen ? setPopOpen(`${record.name}_${record.namespace}`) : setPopOpen('')}>
            {record.colocationType === 'oversold' || record.hasController === true ?
              <Button className='workload-table-opt' type="text" disabled>
                <MoreOutlined className="common_antd_icon" />
              </Button>
              : <Button className='workload-table-opt' type="text">
                <MoreOutlined className="common_antd_icon primary_color" />
              </Button>}
          </Popover>
        </Space>
      ),
    },
  ];

  // 非混部pod列表项
  const podColumns = [
    {
      title: 'Pod名称',
      key: 'podName',
      dataIndex: 'name',
      sorter: true,
      sortOrder: podSortObj.key === 'podName' ? podSortObj.order : '',
      render: (_, record) => <Space>
        {record.hasController === true ?
          <div style={{ display: 'flex' }}>
            <div style={{ marginRight: '8px' }}>{record.name}</div>
            <Tooltip title='请前往其他更高级的控制器进行管理'>
              <QuestionCircleOutlined style={{ color: '#89939B' }} />
            </Tooltip>
          </div> : <div>{record.name}</div>}
      </Space>,
    },
    {
      title: '命名空间',
      key: 'podNamespace',
      filters: filterPodNamespace,
      filteredValue: currentPodNamespace ? [currentPodNamespace] : null,
      filterMultiple: false,
      sorter: true,
      sortOrder: podSortObj.key === 'podNamespace' ? podSortObj.order : '',
      render: (_, record) => <Space>
        {record.namespace}
      </Space>,
    },
    {
      title: '所属混部节点',
      key: 'pod_belong',
      sorter: true,
      sortOrder: podSortObj.key === 'pod_belong' ? podSortObj.order : '',
      render: (_, record) => <>
        {record.hostIP ? record.hostIP : '--'}
      </>,
    },
    {
      title: 'Pod IP地址',
      key: 'pod_ip',
      sorter: true,
      sortOrder: podSortObj.key === 'pod_ip' ? podSortObj.order : '',
      render: (_, record) => <>
        {record.podIPs ? record.podIPs.map(item => {
          return <div className='table_tuning_box'><p>{item}</p></div>;
        }) : '--'}
      </>,
    },
    {
      title: '期望业务属性',
      key: 'pod_status',
      width: 160,
      render: (_, record) => <div>
        <Select
          className='table_hope_status'
          value={filterStatusName(record.colocationType)}
          onChange={e => handlePodHopeChange(e, record)}
          options={workloadStatusOptions}
          disabled={record.hasController === true}
        />
      </div>,
    },
  ];

  // 获取非混部PodList
  const getPodList = useCallback(async () => {
    setPodLoading(true);
    try {
      const res = await getNonColocationPodsListData();
      if (res.status === ResponseCode.OK) {
        const arr = res.data?.data?.map((item, index) => {
          item.colocationType = 'online';
          return {
            ...item,
            key: item.uid,
          };
        });
        arr.sort((a, b) => {
          // 如果a的hasController为true而b的hasController为false，则a排在b前面
          if (a.hasController && !b.hasController) {
            return 1;
          }
          // 如果b的hasController为true而a的hasController为false，则b排在a前面
          if (!a.hasController && b.hasController) {
            return -1;
          }
          // 如果两者都为true或都为false，则保持原有顺序或者根据其他条件排序
          return 0;
        });
        setPodList(arr);
        setOriginalList(JSON.parse(JSON.stringify(arr)));
        setAttTypeList(JSON.parse((JSON.stringify(JSON.parse((JSON.stringify(arr)))))));
        setPodDetailTotal(arr.length);
        // 赋值命名空间
        if (res.data.data) {
          let temporyNamespaceList = [];
          res.data.data.map(item => {
            temporyNamespaceList.push({ text: item.namespace, value: item.namespace });
          });
          setFilterPodNamespace([...filterRepeat(temporyNamespaceList)]);
        }
      } else {
        messageApi.error('接口异常');
      }
    } catch (e) {
      setPodList([]); // 数组为空
    }
    setPodLoading(false);
  }, []);

  // 获取混部PodList
  const getColocationPodList = useCallback(async () => {
    setPodLoading(true);
    try {
      const res = await getColocationPodsListData();
      if (res.status === ResponseCode.OK) {
        const arr = res.data.data.map((item, index) => {
          return {
            ...item,
            key: item.uid,
          };
        });
        arr.sort((a, b) => {
          if (a.hasController && !b.hasController) {
            return 1;
          }
          if (!a.hasController && b.hasController) {
            return -1;
          }
          return 0;
        });
        setColocationPodList(arr);
        setColocationOriginalList(arr);
        setColocationPodDetailTotal(arr.length);
        // 赋值命名空间
        if (res.data.data) {
          let temporyNamespaceList = [];
          res.data.data.map(item => {
            temporyNamespaceList.push({ text: item.namespace, value: item.namespace });
          });
          setColocationFilterPodNamespace([...filterRepeat(temporyNamespaceList)]);
        }
      } else {
        messageApi.error('接口异常');
      }
    } catch (e) {
      setColocationPodList([]); // 数组为空
    }
    setPodLoading(false);
  }, []);

  // 混部具体表格操作
  const getColocationPodResource = () => {
    let filtertArr = [];
    if (podForm.getFieldsValue().colocationPodName) {
      filtertArr = colocationOriginalList.filter(item => (item.name).toLowerCase().includes(podForm.getFieldsValue().colocationPodName.toLowerCase()));
    } else {
      filtertArr = JSON.parse(JSON.stringify(colocationOriginalList));
    }
    if (colocationPodDetailFilterObj.colocationPodNamespace && colocationPodDetailFilterObj.colocation_pod_status) {
      // 获取筛选框
      let [temporyNamespace, ...reset] = colocationPodDetailFilterObj.colocationPodNamespace;
      let [temporyStatus, ...reset1] = colocationPodDetailFilterObj.colocation_pod_status;
      setCurrentColocationPodNamespace(temporyNamespace);
      setCurrentColocationPodStatus(temporyStatus);
      filtertArr = filtertArr.filter(item => item.namespace === temporyNamespace && filterStatusName(item.colocationType) === temporyStatus);
    } else {
      if (colocationPodDetailFilterObj.colocationPodNamespace) {
        // 获取筛选框
        setCurrentColocationPodStatus('');
        let [temporyNamespace, ...reset] = colocationPodDetailFilterObj.colocationPodNamespace;
        setCurrentColocationPodNamespace(temporyNamespace);
        filtertArr = filtertArr.filter(item => item.namespace === temporyNamespace);
      } else if (colocationPodDetailFilterObj.colocation_pod_status) {
        // 获取筛选框
        setCurrentColocationPodNamespace('');
        let [temporyStatus, ...reset1] = colocationPodDetailFilterObj.colocation_pod_status;
        setCurrentColocationPodStatus(temporyStatus);
        filtertArr = filtertArr.filter(item => filterStatusName(item.colocationType) === temporyStatus);
      } else {
        setCurrentColocationPodNamespace('');
        setCurrentColocationPodStatus('');
      }
    }
    if (colocationPodSortObj.key === 'colocationPodName') {
      if (colocationPodSortObj.order) {
        colocationPodSortObj.order === 'ascend' ? sortWorkLoadByNameAscend('pod', filtertArr) : sortWorkLoadByNameDescend('pod', filtertArr);
      }
    } else if (colocationPodSortObj.key === 'colocationPodNamespace') {
      if (colocationPodSortObj.order) {
        colocationPodSortObj.order === 'ascend' ? sortWorkLoadByNamespaceAscend('pod', filtertArr) : sortWorkLoadByNamespaceDescend('pod', filtertArr);
      }
    } else if (colocationPodSortObj.key === 'colocation_pod_belong') {
      if (colocationPodSortObj.order) {
        colocationPodSortObj.order === 'ascend' ? sortWorkLoadByNodeAscend('pod', filtertArr) : sortWorkLoadByNodeDescend('pod', filtertArr);
      }
    } else if (colocationPodSortObj.key === 'colocation_pod_ip') {
      if (colocationPodSortObj.order) {
        colocationPodSortObj.order === 'ascend' ? sortWorkLoadByIpAscend('pod', filtertArr) : sortWorkLoadByIpDescend('pod', filtertArr);
      }
    } else {
      if (colocationPodSortObj.order) {
        colocationPodSortObj.order === 'ascend' ? sortWorkLoadByStatusAscend('pod', filtertArr) : sortWorkLoadByStatusDescend('pod', filtertArr);
      }
    }
    setColocationPodDetailTotal(filtertArr.length);
    setColocationPodList([...filtertArr]);
  };

  // 非混部具体表格操作
  const getPodResource = () => {
    let filtertArr = originalList;
    if (podForm.getFieldsValue().podName) {
      filtertArr = originalList.filter(item => (item.name).toLowerCase().includes(podForm.getFieldsValue().podName.toLowerCase()));
    } else if (podForm.getFieldsValue().podKeyValue) {
      filtertArr = originalList.filter(item => { return compareObjKeys(item, podForm.getFieldsValue().podKeyValue) });
    } else {
      filtertArr = JSON.parse(JSON.stringify(originalList));
    }
    if (!podDetailFilterObj?.podNamespace) {
      setCurrentPodNamespace('');
    } else {
      // 获取筛选框
      let [temporyStatus, ...reset] = podDetailFilterObj.podNamespace;
      setCurrentPodNamespace(temporyStatus);
      filtertArr = filtertArr.filter(item => item.namespace === temporyStatus);
    }
    if (podSortObj?.key === 'podName') {
      if (podSortObj.order) {
        podSortObj.order === 'ascend' ? sortWorkLoadByNameAscend('pod', filtertArr) : sortWorkLoadByNameDescend('pod', filtertArr);
      }
    } else if (podSortObj?.key === 'podNamespace') {
      if (podSortObj.order) {
        podSortObj.order === 'ascend' ? sortWorkLoadByNamespaceAscend('pod', filtertArr) : sortWorkLoadByNamespaceDescend('pod', filtertArr);
      }
    } else if (podSortObj?.key === 'pod_belong') {
      if (podSortObj.order) {
        podSortObj.order === 'ascend' ? sortWorkLoadByNodeAscend('pod', filtertArr) : sortWorkLoadByNodeDescend('pod', filtertArr);
      }
    } else {
      if (podSortObj.order) {
        podSortObj.order === 'ascend' ? sortWorkLoadByIpAscend('pod', filtertArr) : sortWorkLoadByIpDescend('pod', filtertArr);
      }
    }

    setPodDetailTotal(filtertArr.length);
    setPodList([...filtertArr]);
  };

  // 非混部table通过name查找
  const getPodResourceTableByName = () => {
    podForm.setFieldsValue({ podKeyValue: '' });
    getPodResource();
  };

  // 非混部table通过name查找
  const getPodResourceTableByLabel = () => {
    podForm.setFieldsValue({ podName: '' });
    getPodResource();
  };

  // 混部表格操作
  const handleColocationPodDetailTableChange =
    (
      pagination,
      filter,
      _sorter,
      extra
    ) => {
      if (extra.action === 'paginate') {
        setColocationPodPage(pagination.current || 1);
        setColocationPodDetailPageSize(pagination.pageSize || 10);
      }
      if (extra.action === 'filter') {
        setColocationPodDetailFilterObj(filter);
        setColocationPodPage(1);
        setColocationPodDetailPageSize(10);
      }
      if (extra.action === 'sort') {
        setColocationPodSortObj({ key: _sorter.columnKey, order: _sorter.order });
        setColocationPodPage(1);
        setColocationPodDetailPageSize(10);
      }
    };

  // 非混部表格操作
  const handlePodDetailTableChange =
    (
      pagination,
      filter,
      _sorter,
      extra
    ) => {
      if (extra.action === 'paginate') {
        setPodPage(pagination.current || 1);
        setPodDetailPageSize(pagination.pageSize || 10);
      }
      if (extra.action === 'filter') {
        setPodDetailFilterObj(filter);
        setPodPage(1);
        setPodDetailPageSize(10);
      }
      if (extra.action === 'sort') {
        setPodSortObj({ key: _sorter.columnKey, order: _sorter.order });
        setPodPage(1);
        setPodDetailPageSize(10);
      }
    };

  // 改变期望选择
  const handlePodHopeChange = (checked, data) => {
    let newtablelist = JSON.parse((JSON.stringify(podList)));
    newtablelist.forEach(item => {
      if (item.name === data.name) {
        item.colocationType = reseverStatusName(checked);
      }
    });
    let newOrgtablelist = originalList;
    newOrgtablelist.forEach(item => {
      if (item.name === data.name) {
        item.colocationType = reseverStatusName(checked);
      }
    });
    const intersection = newtablelist.filter(obj1 => selectedRows.some(obj2 => obj2.name === obj1.name));
    setPodList(newtablelist);
    setOriginalList(newOrgtablelist);
    setSelectedRows(intersection);
  };

  // 点击出现改变混部属性的弹窗
  const changeColocationState = (record, type) => {
    setPopOpen('');
    if (type === 'off') {
      setChoseState('离线');
    } else {
      setChoseState('超卖');
    }
    setColocationState(true);
    setDeleteId(record.key);
  };

  const openButton = () => {
    setSelectionType(true);
    setColShow(true);
    setIsPodWithoutPaddingBottom('has-padding');
    getPodList();
  };

  // 混部选择
  const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
    setSelectedRowKeys(newSelectedRowKeys);
    setSelectedRows(newSelectedRows);
  };

  // 混部model的确定按钮
  const handleStateModelConfirm = async (type) => {
    if (type === '离线') {
      // 离线代接口
      try {
        const res = await updatePodsExpectStatusToOffline(deleteId);
        if (res.status === ResponseCode.OK) {
          messageApi.success('修改成功');
          getColocationPodList();
        }
      } catch (e) {
        messageApi.error('修改失败');
      }
    } else {
      // 超卖代接口
      messageApi.success('修改成功');
      getColocationPodList();
    }
    setColocationState(false);
  };

  // 混部model的取消按钮
  const handleStateModelCancel = async () => {
    setColocationState(false);
  };

  // 重置按钮
  const handlePodReset = async () => {
    setPodLoading(true);
    await getNonColocationPodsListData();
    getPodResource();
    setPodLoading(false);
  };

  // 重置按钮
  const handleColocationPodReset = async () => {
    await getColocationPodList();
    getColocationPodResource();
  };

  // 条件重置的公共部分
  const restFilter = () => {
    podForm.setFieldsValue({ podName: '' });
    podForm.setFieldsValue({ podKeyValue: '' });
    setCurrentPodNamespace(''); // 重置筛选条件
    setPodSortObj({});
    setPodDetailFilterObj({});
    setSelectedRowKeys([]);
    setSelectedRows([]);
    setPodPage(1);
    setPodDetailPageSize(10);
  };

  // table的取消 重置 确定
  const onCancel = () => {
    setColShow(false);
    setIsPodWithoutPaddingBottom('no-padding');
    setSelectionType(false);
    getPodResource();
    restFilter();
  };

  const onRest = () => {
    restFilter();
    setPodList(JSON.parse((JSON.stringify(attTypeList))));
    setOriginalList(JSON.parse((JSON.stringify(attTypeList))));
  };

  const onSure = async () => {
    if (selectedRows.length === 0) {
      messageApi.error('至少需要选择1个工作负载');
    } else if (selectedRows.length > 10) {
      messageApi.error('一次最多只能添加10个工作负载');
    } else {
      try {
        const res = await addColocationPods(selectedRows);
        if (res.status === ResponseCode.OK) {
          messageApi.success('混部pod添加成功');
          setColShow(false);
          setIsPodWithoutPaddingBottom('no-padding');
          podForm.resetFields();
          setSelectedRowKeys([]);
          setSelectedRows([]);

          getColocationPodResource();
          setCurrentColocationPodNamespace(''); // 重置筛选条件
          setColocationPodSortObj({});
          setColocationPodDetailFilterObj({});
          setColocationPodPage(1);

          getPodResource();
          setCurrentPodNamespace(''); // 重置筛选条件
          setPodSortObj({});
          setPodDetailFilterObj({});
          setPodPage(1);

          getColocationPodList();
        }
      } catch (e) {
        messageApi.error('混部pod添加失败');
      }
    }
  };

  const rowClassName = (record) => {
    if (record.hasController === true) {
      return 'disabled-node-row';
    }
    return '';
  };

  useEffect(() => {
    getColocationPodResource();
  }, [colocationPodDetailFilterObj, colocationPodSortObj]);

  useEffect(() => {
    getPodResource();
  }, [podDetailFilterObj, podSortObj]);

  useEffect(() => {
    getColocationPodList();
  }, [getColocationPodList]);

  return <div className="workload_content">
    <div className='workload_detail_content'>
      <div className={`${isShow}`} style={{ marginTop: '20px' }}>
        <ToolTipComponent>
          <div className="podDetail" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <div className='promot-box'>在线属性的工作负载比离线属性会有更高的QoS等级，超卖属性的工作负载会使用超卖资源。</div>
            <CloseOutlined onClick={handlePodShowChange} />
          </div>
        </ToolTipComponent>
      </div>
      <div className={`${isShow}workload_detail_content_box`}>
        <div className='workload_detail_form'>
          <Form className="workload-searchForm form_padding_bottom" form={podForm}>
            {
              colShow ?
                <div className='workload-searchForm-box'>
                  <Form.Item name="podName" className="workload-search-input" style={{ marginRight: '20px' }}>
                    <Input.Search placeholder="搜索Pod名称" onSearch={() => getPodResourceTableByName()} autoComplete="off" maxLength={53} />
                  </Form.Item>
                  <Form.Item name="podKeyValue" className="workload-search-input">
                    <Input.Search placeholder="按标签搜索  例：key：value" onSearch={() => getPodResourceTableByLabel()} autoComplete="off" />
                  </Form.Item>
                </div> :
                <Form.Item name="colocationPodName" className="workload-search-input" style={{ marginRight: '20px' }}>
                  <Input.Search placeholder="搜索Pod名称" onSearch={() => getColocationPodResource()} autoComplete="off" maxLength={53} />
                </Form.Item>
            }
            <Form.Item>
              {!colShow ?
                <Space>
                  <Button className='workload_detail_form_button' onClick={() => openButton()}>
                    添加混部Pod
                  </Button>
                  <Button icon={<SyncOutlined />} onClick={handleColocationPodReset} className="reset_btn" style={{ marginLeft: '16px' }}></Button>
                </Space> :
                <Space>
                  <Button icon={<SyncOutlined />} onClick={handlePodReset} className="reset_btn" style={{ marginLeft: '16px' }}></Button>
                </Space>
              }
            </Form.Item>
          </Form>
        </div>
        <div className={`workLoad-colocation-table-${isPodWithoutPaddingBottom}  workload_detail_content_table`}>
          {contextHolder}
          <ConfigProvider locale={zhCN}>
            {colShow ?
              <Table
                loading={podLoading}
                columns={podColumns}
                dataSource={podList}
                rowClassName={rowClassName}
                rowSelection={selectionType ? {
                  type: 'checkbox',
                  selectedRowKeys,
                  preserveSelectedRowKeys: true,
                  onChange: onSelectChange,
                  getCheckboxProps: (record) => ({
                    name: record.name,
                    disabled: record.hasController === true,
                  }),
                } : null}
                pagination={{
                  className: 'colocation-website-page',
                  current: podPage,
                  pageSize: podDetailPageSize,
                  total: podDetailTotal || 0,
                  showTotal: (total) => `共${total}条`,
                  showSizeChanger: true,
                  showQuickJumper: true,
                  pageSizeOptions: [10, 20, 50],
                }}
                onChange={handlePodDetailTableChange}
              >
              </Table> :
              <Table
                loading={podLoading}
                columns={colocationPodColumns}
                dataSource={colocationPodList}
                rowClassName={rowClassName}
                pagination={{
                  className: 'colocation-website-page',
                  current: colocationPodPage,
                  pageSize: colocationPodDetailPageSize,
                  total: colocationPodDetailTotal || 0,
                  showTotal: (total) => `共${total}条`,
                  showSizeChanger: true,
                  showQuickJumper: true,
                  pageSizeOptions: [10, 20, 50],
                }}
                onChange={handleColocationPodDetailTableChange}
              >
              </Table>
            }
          </ConfigProvider>
        </div>
      </div>
    </div>
    <ColocationStateModal
      title={`修改为${choseState}`}
      open={colocationState}
      cancelFn={handleStateModelCancel}
      confirmFn={() => handleStateModelConfirm(choseState)}
      state={choseState}
    />
    <ColocationDeleteModal
      title="设置为非混部工作负载"
      open={deleteModal}
      cancelFn={handleDeleteCancel}
      content={[
        `确定将混部工作负载 ${deleteName} 设置为非混部工作负载吗？`,
      ]}
      confirmFn={handleDeleteConfirmBack}
    />
    {colShow ? <div className='child_content_workload_footer'>
      <div className='workload_btn_footer_text'>
        <p>{`已选择${selectedRows.length}个工作负载`}</p>
      </div>
      <div className='workload_btn_footer_button'>
        <Button className="cancel_btn" onClick={onCancel}>取消</Button>
        <Button className="cancel_btn" onClick={onRest}>重置</Button>
        <Button className="primary_btn" onClick={onSure}>确定</Button>
      </div>
    </div> : <></>}
  </div>;
}